<template>
  <el-form
    ref="ruleForm"
    :model="formData"
    class="demo-ruleForm"
    label-position="right"
    label-width="120px"
  >
    <div
      v-for=" (formobj,index) in formObj"
      v-show="!formobj.notShow"
      :key="index"
    >
      <el-form-item :label="formobj.label" :prop="formobj.prop" :rules="formobj.rules">
        <!-- inupt输入框 -->
        <el-input
          v-if="formobj.input"
          v-model="formData[formobj.prop]"
        />
        <!-- textarea输入框 -->
        <el-input
          v-if="formobj.textarea"
          v-model="formData[formobj.prop]"
          size="small"
          type="textarea"
          :placeholder="formobj.placeholder"
        />
        <!-- select选择器 -->
        <el-select
          v-if="formobj.select"
          v-model="formData[formobj.prop]"
          size="small"
          :placeholder="formobj.placeholder"
          @change="selectChange($event,index,formobj.prop)"
        >
          <el-option v-for="(options, selectIdx) in formobj.options" :key="selectIdx" :label="options.label" :value="options.label" />
        </el-select>
        <!-- select多选 选择器 -->
        <el-select
          v-if="formobj.multiSelect"
          v-model="formData[formobj.prop]"
          size="small"
          multiple
          :placeholder="formobj.placeholder"
          @change="selectChange($event,index,formobj.prop)"
        >
          <el-option
            v-for="(options, selectIdx) in formobj.options"
            :key="selectIdx"
            :label="options.label"
            :value="options.label"
          />
        </el-select>
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="formobj.date"
          v-model="formData[formobj.prop]"
          value-format="yyyy-MM-dd"
          type="date"
          size="small"
          :placeholder="formobj.placeholder"
        />
        <!-- 时间选择器 -->
        <el-time-picker
          v-if="formobj.time"
          v-model="formData[formobj.prop]"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
          size="small"
          :placeholder="formobj.placeholder"
          @change="chooseTime($event,formobj.prop)"
        />
        <!-- 日期时间选择器 -->
        <el-date-picker
          v-if="formobj.datetime"
          v-model="formData[formobj.prop]"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          size="small"
          :placeholder="formobj.placeholder"
          @change="chooseTime($event,formobj.prop)"
        />
        <!-- 年月日时分秒，范围时间 -->
        <el-date-picker
          v-if="formobj.dateTimeRange"
          v-model="formData[formobj.prop]"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          size="small"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="chooseTime($event,formobj.prop)"
        />
        <el-switch
          v-if="formobj.switch"
          v-model="formData[formobj.prop]"
          size="small"
          :active-value="formobj.options[0].label"
          :inactive-value="formobj.options[1].label"
          :active-text="formobj.options[0].label"
          :inactive-text="formobj.options[1].label"
          active-color="#f84311"
          inactive-color="rgba(0,0,0,0.2)"
          @change="formSwitchChange($event,index,formobj.prop)"
        />
        <!-- radio单选框 -->
        <el-radio-group
          v-if="formobj.radio"
          v-model="formData[formobj.prop]"
          @change="radioChange($event,index,formobj.prop)"
        >
          <el-radio
            v-for="(options, radioIdx) in formobj.options"
            :key="radioIdx"
            :label="options.label"
            :value="options.value"
          />
        </el-radio-group>
        <!-- checkbox复选框 -->
        <el-checkbox-group
          v-if="formobj.checkbox"
          v-model="formData[formobj.prop]"
          @change="changeCheck($event,index,formobj.prop)"
        >
          <el-checkbox
            v-for="(item,checkIds) in formobj.options"
            :key="checkIds"
            :label="item.label"
          />
        </el-checkbox-group>
        <!-- 单个图片上传 --><!-- 如果对象有值就回显，没有值就为空 -->
        <!-- {{ formobj }}===
        {{ formData }}===
        {{ formobj.id }}==
        {{ formData[formobj.prop] }} -->
        <!-- {{ formData[formobj.prop] }}
        {{ formobj }} -->
        <el-upload
          v-if="formobj.image"
          :ref="formobj.prop"
          :headers="myHeaders"
          class="avatar-uploader"
          :action="$store.getters.updateURL+'/attachment/uploadAndSave'"
          :show-file-list="false"
          :objbind="formobj.prop"
          :on-success="(response,file,fileList,objbind)=>uploadImg(formobj.prop,response,file,fileList,objbind)"
          :data="{type:2}"
        >
          <img v-if="formobj.IMGURL " :src="formobj.IMGURL" class="avatar">
          <img v-else class="avatar" :src="require('@/assets/icon1.png')" alt="">
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过1MB
          </div>
        </el-upload>

        <!-- 图片集 --><!-- 如果对象有值就回显，没有值就为空 -->
        <div @click="moreImage(formobj.prop)">
          <el-upload
            v-if="formobj.multiImage"
            :ref="formobj.prop"
            :headers="myHeaders"
            :action="$store.getters.updateURL+'/attachment/uploadAndSave'"
            class="avatar-uploader"
            :on-success="(response,file,fileList)=>uploadSuccess(formobj.prop,response,file,fileList)"
            list-type="picture-card"
            :auto-upload="true"
            :file-list="formData[formobj.prop]"
            :on-remove="(response,file,fileList)=>removeSuccess(formobj.prop,response, file,fileList)"
            :data="{type:2}"
          >
            <!-- <img :src="imgList" alt=""> -->
            <i slot="default" class="el-icon-plus" />
          </el-upload>
        </div>
        <!-- <img v-for=" itemss in formData[formobj.prop]" style="width:100px;height:100px" :src="itemss.url" alt=""> -->
        <!-- <el-dialog v-if="formobj.upload" :visible.sync="dialogVisible" :modal-append-to-body="false" width="40%">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog> -->
        <!-- 文件 视频 --><!-- 如果对象有值就回显，没有值就为空 -->
        <!-- <div @click="upload(formobj.prop)"> -->
        <el-upload
          v-if="formobj.file || formobj.video"
          :ref="formobj.prop"
          :headers="myHeaders"
          :action="$store.getters.updateURL+'/attachment/uploadAndSave'"
          class="avatar-uploader"
          :on-success="(response,file,fileList)=>uploadSuccess(formobj.prop,response, file,fileList)"
          :auto-upload="true"
          :limit="1"
          :on-exceed="masterFileMax"
          :on-remove="(response,file,fileList)=>removeSuccess(formobj.prop,response, file,fileList)"
          :file-list="formobj.list"
          :data="formobj.video?{type:3}:{type:0}"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- </div> -->
        <!-- 多视频多文件 --><!-- 如果对象有值就回显，没有值就为空 -->
        <!-- <div @click="upload(formobj.prop)"> -->
        <el-upload
          v-if="formobj.multiVideo || formobj.multiFile "
          :ref="formobj.prop"
          :headers="myHeaders"
          :action="$store.getters.updateURL+'/attachment/uploadAndSave'"
          class="avatar-uploader"
          :on-success="(response,file,fileList)=>uploadSuccess(formobj.prop,response,file,fileList,)"
          :auto-upload="true"
          :file-list="formData[formobj.prop]"
          :on-remove="(response,file,fileList)=>removeSuccess(formobj.prop,response,file, fileList)"
          :data="formobj.video?{type:3}:{type:0}"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <!-- </div> -->
        <!-- 视频集 --><!-- 如果对象有值就回显，没有值就为空 -->
        <!-- <el-upload
          v-if="formobj.file"
          :ref="formobj.prop"
          :accept="formobj.accept ? formobj.accept : 'PNG,JPEG'"
          :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []"
          :action="$store.getters.updateURL+'/attachment/save'"
          :limit="formobj.uploadObj.limit"
          :class="{'hide':formobj.uploadObj.hideUpload || formData[formobj.prop].length==formobj.uploadObj.limit}"
          :on-preview="handlePictureCardPreview"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
          :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.uploadObj.limit,formobj.prop,index)"
          list-type="picture-card"
          :auto-upload="true"
        >
          <i slot="default" class="el-icon-plus" />
        </el-upload> -->
        <!-- 按钮 -->
        <!-- <el-button v-if="formobj.button" size="small"  :loading="formobj.loading" :type="formobj.buttonType || 'primary'" @click="buttonClick(formobj.prop,index)">{{ formobj.placeholder }}</el-button> -->
        <!-- text展示 -->
        <!-- <span v-if="formobj.text" v-text="formData[formobj.prop]" /> -->
        <!-- 计量单位 -->
        <!-- <span v-if="formobj.unit" class="left10">{{ formobj.unit }}</span> -->
        <!-- 给富文本 -->
        <div v-if="formobj.richText" :ref="formobj.prop">
          <div>
            <myTinymce ref="myTinymce" :tinymce-html="content" @onClick="input(formobj.prop)" />
          </div>
        </div>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>

import myTinymce from '@/components/scEditor/index.vue'
import { getToken } from '@/utils/auth'
import log from '@/api/log'
var token = 'Bearer ' + getToken()
export default {
  components: {
    // quillEditor
    myTinymce
  },
  props: {

    formObj: {
      type: Array,
      required: true
    },
    formData: {
      type: Object,
      required: true
    },
    secondData: {
      type: Object,
      required: true
    }

  },
  data() {
    const uploadFileUrl = this.$store.state.user.uploadFileUrl
    return {
      status: false,
      content: '',
      text: [],
      tindata: '',
      myHeaders: { Authorization: token },
      headers: {},
      imageUrl: '',
      imgUrl: this.$store.getters.updateURL,
      uploadUrl: uploadFileUrl,
      image: '',
      images: '',
      dialogImageUrl: '',
      searchSelectLoading: false,
      dialogVisible: false,
      disabled: false,
      uploadTitle: '',
      videos: [],
      text2: [],
      text3: [],
      tinType: '',
      imgList: [],
      formType: [],
      list: [1, 2, 3]
      // formData: {}
    }
  },
  watch: {
    formObj(val, value) {

      // this.formType = val
      // this.formObj = val

      // this.formObj = val
    },
    formData: {
      handler(val) {
        this.formData = val
      },
      immediate: true
    }
  },
  mounted() {

  },
  created() {

  },
  methods: {
    change(e) {
      this.$forceUpdate()
    },
    moreImage(val) {

    },
    input(e) {
      this.tinType = e
    },
    // 按钮组
    radioChange($event, index, prop) {
      this.formData[prop] = $event
      this.secondData[prop] = $event
    },
    //   多选框
    changeCheck($event, index, prop) {
      this.formData[prop] = $event
      this.secondData[prop] = $event
    },
    // 时间范围选择器
    chooseTime($event, prop) {
      this.formData[prop] = $event
      this.secondData[prop] = $event
    },
    // select变化调用
    selectChange($event, index, prop) {
      // this.$emit('selectChange', value, index, prop)

      //   this.formData[prop] = $event.toString()
      this.formData[prop] = $event
      this.secondData[prop] = $event
      this.$forceUpdate()
    },
    // input的input事件
    inputINPUT(value, index, prop) {
      this.$emit('inputINPUT', value, index, prop)
    },
    // input的change事件
    inputChange(value, index, prop) {
      this.$emit('inputChange', value, index, prop)
    },
    // 搜索类型select搜索
    // remoteMethod(query, index, prop) {
    //   if (query) {
    //     this.searchSelectLoading = true
    //     this.$emit('querySelectValue', query, index, prop)
    //     setTimeout(() => {
    //       this.formObj[index].options = this.searchSelectOptionsCb
    //       this.searchSelectLoading = false
    //     }, 500)
    //   } else {
    //     this.searchSelectOptios = []
    //   }
    // },
    // switch变化
    formSwitchChange(val, index, prop) {
      this.secondData[prop] = $event
      this.$emit('formSwitchChange', val, index, prop)
      this.$forceUpdate()
    },
    // 按钮点击事件
    buttonClick(prop, index) {
      this.secondData[prop] = $event
      this.$emit('buttonClick', prop, index)
      this.$forceUpdate()
    },

    // 获取富文本框内容
    getTin(val) {
      if (this.$refs.myTinymce) {
        var rs = this.$refs.myTinymce[0].value
        // this.formData[this.tinType] = rs
        return this.formData
      }
    },

    // 设置富文本框内容
    setTin(v) {
      var timer = setInterval(() => {
        if (this.$refs.myTinymce) {
          this.$refs.myTinymce[0].value = v
          clearInterval(timer)
        }
      }, 500)
    },
    // 图片上传成功
    uploadImg(item, res, file, fileList, objbind) {
      if (res.code == -200 || res.code == 0) {
        this.formObj.forEach(el => {
          if (el.prop == item) {
            el.IMGURL = res.data.url
            this.$forceUpdate()
          }
        })
        this.formData[item] = res.data.id
      }
    },
    masterFileMax() {
      this.$message.warning(`最多上传 1 个文件。`)
    },
    // 图片集上传
    changeImages(file, fileList) {

    },

    // 多文件多视频
    uploadSuccess(item, response, file, fileList) {
      if (response.code == 0) {
        this.status = true
        // this.formData[item] = []

        const arr = fileList
        arr[fileList.length - 1] = response.data
        this.formData[item] = arr
        // this.$set(this.formData[item], arr[arr.length - 1], response.data)
      }
    },

    removeSuccess(item, response, file, fileList) {
      this.formData[item] = file
    },
    // 文件删除
    handleRemove(file, fileList, limit, prop, index) {
      this.formObj[index].uploadObj.hideUpload = fileList.length == limit
      // 文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮
      this.pushUpload(file, fileList, limit, prop)
    },
    // 文件预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 提交时验证表单，直接在父级调用
    submitForm() {
      let formValidate = Boolean
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          formValidate = true
        } else {
          this.$message.warning('请把信息填写完整！')
          formValidate = false
        }
      })
      return formValidate
    },
    /* 清空表单
				逻辑：
				1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！
				2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示
			 */
    resetForm(uploadArr) {
      this.$refs.ruleForm.resetFields()
      if (uploadArr) {
        for (let i = 0;i < uploadArr.length;i++) {
          this.$refs[uploadArr[i]][0].clearFiles()
          const index = this.formObj.findIndex(item => item.prop == uploadArr[i])
          this.formObj[index].uploadObj.hideUpload = false
        }
      }
    },
    // 单个字段验证
    validateFieldProp(prop) {
      let formValidate = Boolean
      this.$refs.ruleForm.validateField(prop, valid => {
        if (!valid) {
          formValidate = true
        } else {
          formValidate = false
        }
      })
      return formValidate
    },
    // 对文件上传，删除进行赋值，调用form验证
    pushUpload(response, file, fileList, objbind) {
      if (fileList.length > 0) {
        // this.formData[prop] = fileList

      } else {
        // 表示没有数据,把字段置空
        // this.formData[prop] = ''
      }
    //   this.$refs.ruleForm.validateField(prop)// 调用验证form表单的文件上传
    }
    // 地图input的input事件
    // aMapInput(value, prop) {
    //   this.$refs[`aMap${prop}`][0].getSearch(value)
    // },
    // 子组件返回地图搜索值
    // cbSearch(val, prop) {
    //   this.setSearchVal = val.tips // 子组件
    //   this.searchShow = prop // 显示input输入联想
    // },
    // 选中地图值
    // selectVal(val, prop, index) {
    //   // 赋值的时候，拿到键，及formobj的下标，进行赋值
    //   this.formData[prop] = val.name // input输入框赋值
    //   this.formData.district = val.district // 传入省市区
    //   const lngLat = {
    //     lng: val.location.lng,
    //     lat: val.location.lat
    //   }
    //   this.formData[`${prop}location`] = lngLat
    //   this.searchShow = '' // 隐藏input输入联想
    // }

  }
}
</script>
<style lang='scss'>
  .el-upload-list__item{
  transition: none !important;
}
</style>
<style lang="scss" scoped>
// @width: 220px;
// /deep/.el-input {
// 	width: @width;
// }

// /deep/.el-select {
// 	width: @width;
// }

// /deep/.el-date-editor.el-input {
// 	width: @width;
// }
// /deep/.el-date-editor .el-range-separator{
// 	width: 20px !important;
// }
// /deep/.el-range-editor--small.el-input__inner{
// 	width: 400px;
// }

.el-textarea {
    width: 400px;
}
.el-upload--picture-card{
    width: 128px;
    height: 128px;
}
.avatar-uploader{
    .avatar{
        width: 128px;
    }

}
// .hide {
// 	/deep/ .el-upload--picture-card {
// 		display: none;
// 	}
// }
.amap_div {
    overflow: hidden;
    height: 400px;
    width: 600px;
    position: relative;

    .sreach_ul {
        position: absolute;
        top: 1;
        background-color: white;
        z-index: 9;
        min-width: 210px;
        float: auto;
        height: 200px;
        overflow: auto;
        padding: 0 20px;
        line-height: 24px;
    }
}
</style>
